<template>
    <div class="containers">
        <div class="header">
            <img @click="goHome" src="../assets/images/pic_img2/btn_home.png" alt="">
            <img @click="goReturn" src="../assets/images/pic_img2/btn_return.png" alt="" style="margin-left: 37px;">
        </div>
        <div class="centers">
            <div @click="goFaceWork(1)">
                <img src="../assets/images/pic_img5/img.png" alt="">
            </div>
            <div @click="goFaceWork(2)">
                <img src="../assets/images/pic_img5/img2.png" alt="">
            </div>
            <div v-if="status == 1" @click="goFaceWork(3)">
                <img src="../assets/images/pic_img5/img3.png" alt="">
            </div>
            <div v-if="status == 2" @click="goFaceWork(3)">
                <img src="../assets/images/pic_img5/img5.png" alt="">
            </div>
            <div v-if="status == 3" @click="goFaceWork(3)">
                <img src="../assets/images/pic_img5/gdzy_end.png" alt="">
            </div>

            <div @click="goFaceWork(4)">
                <img src="../assets/images/pic_img5/img4.png" alt="">
            </div>
        </div>
        <div class="footers">Copyright © 2025 动车入库作业智能登销记系统</div>



         <el-dialog :show-close="false" title="提示" :visible.sync="openmessages" width="600px" append-to-body>
            <div style="margin: 40px auto;">{{ messages }}</div>
            <div style="margin-top:50px;">
                <el-button type="primary" @click="submitForm" class="buttons">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { status } from 'nprogress';
import { picStartClick } from '@/api/home'
export default {
    data() {
        return {
            openmessages:false,
            messages:'',
            ids: '',
            status: ''
        }
    },
    created() {
        this.ids = this.$route.query.id;
        this.status = this.$route.query.status;
    },
    methods: {
        goReturn() {
            this.$router.go(-1)
        },
        goHome() {
            this.$router.push("/login")
        },
        submitForm(){
             this.openmessages = false
        },
        goFaceWork(workStatus) {
            if (workStatus == 1) {
                picStartClick({
                    pageId: localStorage.getItem('pageId'),
                    type: this.status,
                    workPlanId: this.ids
                }).then(res => {
                    if (res.code == 40015) {
                        this.messages = res.msg
                        this.openmessages = true
                        return;
                    }
                    // type区分为第一步点进来直接进入了录脸页面还是  开始了作业
                    this.$router.push(`/faceWork?id=${this.ids}&typeStart=${this.status}&type=2&workStatus=${workStatus}`)
                })
            } else {
                this.$router.push(`/faceWork?id=${this.ids}&typeStart=${this.status}&type=2&workStatus=${workStatus}`)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
    border-radius: 12px !important;
    position: fixed !important;
    width: 600px !important;
    // height: 320px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

::v-deep .el-dialog__header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    margin: auto !important;
    text-align: center !important;
    background: #1a6cd1 !important;
    color: #fff !important;
    padding-bottom: 0 !important;
    padding: 25px !important;
}

::v-deep .el-dialog__title {
    color: #fff !important;
    font-size: 30px;
}

::v-deep .el-dialog__body {
    margin: auto !important;
    text-align: center !important;
    font-size: 26px !important;
    color: #333 !important;
}

.buttons {
    width: 110px;
    height: 60px;
    font-size: 24px;
}
.containers {
    width: 100%;
    height: 100%;
    background-image: url("../assets/images/pic_img2/track_bg.jpg");
    background-size: cover;
    position: relative;

    .header {
        position: absolute;
        left: 569px;
        top: 186px;
    }

    .centers {
        position: absolute;
        top: 360px;
        left: calc((100% - 628px) / 2);

        >div {
            margin-bottom: 60px;
        }
    }
}
</style>